<template>
    <div>
        <Row class="banner">
            <h1>问题台账记录</h1>
            <h2>记录贵阳市智慧消防个人部位及流程上产生的问题</h2>
        </Row>
        <Row :gutter="16" type="flex" justify="start" class="row">
            <Col span="24">
                <Card>
                    <p slot="title">
                        <span>个人/部位问题台账记录</span>
                    </p>
                    <ul class="toolbar" slot="extra">
                        <li class="item">
                            <Date-picker type="datetimerange" 
                            style="width:320px;"
                            @on-change="handlePDSelectedDate" 
                            placeholder="选择日期和时间"></Date-picker>
                        </li>
                        <li class="item">
                            <Input v-model="keywordPD" 
                            placeholder="输入问题名称以搜索"
                            :search="true"
                            @on-search="renderPDTable(0)"
                            enter-button="立即搜索" ></Input>
                        </li>
                        <li class="item">
                            <Button type="default" @click="exportGRWT">导出Excel表格</Button>
                        </li>
                    </ul>
                    <Table :columns="tableColumns" :data="pdTableData"></Table>
                    <Divider />
                    <Page show-elevator :page-size="pdPageSize" :total="pdPageCount" @on-change="renderPDTable"></Page>
                    <Spin fix size="large" v-show="loading.PDTable"></Spin>
                </Card>
            </Col>
        </Row>
        <Row :gutter="16" type="flex" justify="start" class="row">
            <Col span="24">
                <Card>
                    <p slot="title">
                        <span>流程问题台账记录</span>
                    </p>
                    <ul class="toolbar" slot="extra">
                        <li class="item">
                            <Date-picker type="datetimerange" 
                            style="width:320px;"
                            @on-change="handleRCSelectedDate" 
                            placeholder="选择日期和时间"></Date-picker>
                        </li>
                        <li class="item">
                            <Input v-model="keywordRC" 
                            placeholder="输入问题名称以搜索"
                            :search="true"
                            @on-search="renderRCTable(0)"
                            enter-button="立即搜索" ></Input>
                        </li>
                        <li class="item">
                            <Button type="default" @click="exportLCWT">导出Excel表格</Button>
                        </li>
                    </ul>
                    <Table :columns="tableColumns" :data="rcTableData"></Table>
                    <Divider />
                    <Page show-elevator :page-size="rcPageSize" :total="rcPageCount" @on-change="renderRCTable"></Page>
                    <Spin fix size="large" v-show="loading.RCTable"></Spin>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name: '',
        data() {
            return {
                tableColumns:[{
                    title:'序号',key:'index',align:'center',width:80
                },{
                    title:'问题名称',key:'questionName',align:'center'
                },{
                    title:'问题来源',key:'questionSource',align:'center'
                },{
                    title:'问题出现时间',key:'questionTime',align:'center'
                },{
                    title:'问题责任人',key:'questionChargerName',align:'center'
                },{
                    title:'解决状态',key:'questionStatus',align:'center'
                }],
                keywordPD:null,
                keywordRC:null,
                pdTableData:[],
                rcTableData:[],
                pdPageSize:10,
                rcPageSize:10,
                pdPageCount:0,
                rcPageCount:0,
                startTime:{
                    pd:this.dateShift(-722) + ' 00:00:00',
                    rc:this.dateShift(-722) + ' 00:00:00'
                },
                endTime:{
                    pd:this.dateShift(0) + ' 23:59:59',
                    rc:this.dateShift(0) + ' 23:59:59'
                },
                loading:{
                    PDTable:false,
                    RCTable:false
                }
            }
        },
        methods: {
            renderPDTable(index){
                this.loading.PDTable = true
                let params = {
                    MC:this.keywordPD,
                    startTime:this.startTime.pd,
                    endTime:this.endTime.pd,
                    pageIndex:index,
                    pageSize:this.pdPageSize
                }
                axios.get(this.URLHEAD_TA + 'NewGetWTTZ',{params:params}).then(res=>{
                    let json = res.data;
                    this.loading.PDTable = false
                    this.pdTableData = json.Data.Data.map((o,i)=>{
                        return {
                            index:i+1,
                            questionName:`${o.MC}的${o.AlarmType}存在${o.QTexts}问题`,
                            questionSource:o.Address,
                            questionTime:o.AlarmTime,
                            questionStatus:o.Status || '未反馈处理结果',
                            questionChargerName:`${o.FireDuty || '暂无联系人信息'}（${o.FireDutyTel || '暂无联系方式'}）`
                        }
                    })
                    this.pdPageCount = json.Data.count
                })
            },
            renderRCTable(index){
                this.loading.RCTable = true
                let params = {
                    typeName:this.keywordRC,
                    pageIndex:index,
                    pageSize:this.rcPageSize,
                    startTime:this.startTime.rc,
                    endTime:this.endTime.rc
                }
                axios.get(this.URLHEAD_TA + 'IBusinessRiskInfo',{params:params}).then(res=>{
                    let json = res.data
                    this.loading.RCTable = false
                    this.rcTableData = json.Data.map((o,i)=>{
                        return {
                            index: i +1,
                            questionName:`${o.TypeName}存在问题：${o.isPassTime}`,
                            questionSource: o.stm,
                            questionTime:o.TaskEndTime,
                            questionChargerName:o.TaskUserName,
                            questionStatus:o.SignTime
                        }
                    })
                    this.rcPageCount = json.count
                })
            },
            handlePDSelectedDate(daterange){
                this.startTime.pd = daterange[0]
                this.endTime.pd=daterange[1]
            },
            handleRCSelectedDate(daterange){
                this.startTime.rc=daterange[0]
                this.endTime.rc = daterange[1]
            },
            exportLCWT(){
                window.open(`${this.URLHEAD_TA}IBusinessRiskInfoExcel&pageIndex=0&pageSize=10&startTime=${this.startTime.pd}&endTime=${this.endTime.pd}`,'_blank')
            },
            exportGRWT(){
                window.open(`${this.URLHEAD_TA}NewGetWTTZExce&pageIndex=0&pageSize=10&startTime=${this.startTime.rc}&endTime=${this.endTime.rc}`,'_blank')
            }
        },
        mounted() {
            this.renderPDTable(0)
            this.renderRCTable(0)
        
        },
    }
</script>

<style lang="" scoped>
    
</style>